<template>
  <view class="forum-post">
    <view class="feedback-wrap">
      <input
        type="text"
        class="tit"
        placeholder="请输入您分享或提问的标题(50字以内)"
      />
      <view class="info-wrap">
        <view class="info rbox">
          <textarea
            class="msg"
            placeholder="请描述您想了解的信息或者你想分享的事物"
            cols="30"
            rows="10"
            v-model="desc"
            @input="descInput"
          />
          <text class="limit rbox box_self_end">{{ countNum }}/500</text>
        </view>
        <sunuiUpimg></sunuiUpimg>
      </view>
    </view>

    <view class="line rbox box_space_b box_y_center">
      <text class="name">发布类型</text>
      <picker
        mode="selector"
        :range="array"
        :value="arrIdx"
        class="picker-wrap"
        @change="listenerPickerSelected"
      >
        <text>{{ array[arrIdx] }}</text>
      </picker>
    </view>

    <view class="single-btn btn-normal rbox box_center btn-position">
      发布
    </view>
  </view>
</template>

<script>
import sunuiUpimg from "../../components/sunui-upimg/sunui-upimg"
export default {
  data() {
    return {
      countNum: 0,
      desc: '',
      array: ['点击选择', '类型一', '类型二', '类型三', '类型四'],
      arrIdx: 0,
    }
  },
  methods: {
    listenerPickerSelected: function (e) {
      this.arrIdx = e.detail.value
    },
    descInput() {
      if (this.desc.length > 500) {
        this.desc = this.desc.slice(0, 500)
        wx.showToast({
          title: '字数不能超过500',
          icon: 'none'
        })
      }
      this.countNum = this.desc.length
    },
  },
  components: {
    sunuiUpimg
  }
}
</script>

<style lang="scss" scoped>
.forum-post {
  padding: 0 42rpx;
  .feedback-wrap {
    margin-top: 28rpx;
    .tit {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      height: auto;
      min-height: auto;
      background-color: #fff;
      border-radius: 16px 16px 0px 0px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
    }
    .info-wrap {
      margin-top: 6rpx;
      padding: 16rpx 30rpx 20rpx;
      background-color: #fff;
      border-radius: 0px 0px 20px 20px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
      .info {
        .msg {
        }
        .limit {
          font-size: 28rpx;
          line-height: 1;
          color: #9e9e9e;
        }
      }
    }
    .icon-add {
      width: 134rpx;
      height: 134rpx;
      font-size: 58rpx;
      color: #b4b4b4;
      background: #f7f7f7;
      border-radius: 10rpx;
    }
  }

  .line {
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
    .name {
      color: #646566;
    }
    .picker-wrap {
      color: #646566;
      width: 76%;
      text-align: center;

      height: 64rpx;
      line-height: 64rpx;
      background: #ffffff;
      box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
      border-radius: 24rpx;
    }
  }
}
</style>